<template>
    <div class="main">
        <el-container class="operation-wrapper">
            <el-aside v-bind:width="width[num]">
                <div class="aaa">
                    <img src="../assets/img/logo1.png"  width="200px" style="float: left; margin-left: 5px;" />
                </div>


                <el-menu
                        default-active="/myList"
                        background-color="#304156"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        class="el-menu-vertical-demo"
                        :router="true"
                        :collapse="isCollapse">

                    <el-menu-item index="/myList">
                        <div style="margin-right:80px">
                            <i class="el-icon-menu"></i>
                            <span slot="title" @click="addTab('/myList','首页')">首页</span>
                        </div>
                    </el-menu-item>

                    <el-submenu :index="menu.id+''" v-for="menu in leftMenu" >
                        <template slot="title" >
                            <div style="margin-right:50px">
                                <i :class="menu.menuIcno"></i>
                                <span slot="title">{{menu.menuName}}</span>
                            </div>
                        </template>

                        <el-menu-item :index="child.menuUrl" v-for="child in menu.children" style="margin-right:10px;">
                            <i :class="child.menuIcno"></i>
                            <a style="color: white;text-decoration: none"  @click="addTab(child.menuUrl,child.menuName)">{{child.menuName}}</a>
                        </el-menu-item>
                    </el-submenu>

                </el-menu>

            </el-aside>

            <el-container>

                <el-header>
                    <el-row>
                        <el-button type="success" plain class="toCollapse" @click="toggleCollapse"
                                   icon="el-icon-s-fold"></el-button>

                        <div style="float:right; padding-top: 10px;">
                            <el-avatar :src="loginAdmin.hardUrl" shape="square"></el-avatar>
                        </div>

                        <el-dropdown style="color: #303133; float: right; padding-right: 10px;">
							<span class="el-dropdown-link">
							{{loginAdmin.account}}<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
                            <el-dropdown-menu slot="dropdown">

                                    <el-dropdown-item>
                                        <router-link :to="'/myList'">我的主页</router-link>
                                    </el-dropdown-item>
                                <el-dropdown-item>
                                    <el-button type="text" @click="dialogFormVisible = true">修改密码</el-button>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <el-link :underline="false" @click="quit()">退出</el-link>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-row>
                </el-header>

                <el-main>
                    <!--标签页-->
                    <el-tabs
                            v-model="editableTabsValue"
                            type="card"
                            closable
                            @tab-remove="removeTab"
                            @tab-click="handleClick">
                        <el-tab-pane
                                v-for="(item, index) in editableTabs"
                                :key="item.name"
                                :label="item.title"
                                :name="item.name">
                        </el-tab-pane>

                        <router-view/>
                    </el-tabs>
                </el-main>
<!--修改密码-->
                <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
<!--                    {{ruleForm}}-->
                    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="原密码" prop="pass">
                            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码" prop="newPass">
                            <el-input type="password" v-model.number="ruleForm.newPass" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="checkPass">
                            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                        <el-button type="primary" @click="editPassword(ruleForm.checkPass)">确 定</el-button>
                    </div>
                </el-dialog>

                <!--<el-footer>Footer</el-footer>-->
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "main",
        data() {
            let validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    callback();
                }
            };
            let checkNewPass = (rule, value, callback) => {
                if (value === '') {
                    return callback(new Error('新密码不能为空'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            let validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value != this.ruleForm.newPass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return{
                isCollapse: false,
                dialogFormVisible :false,
                loginAdmin:{},
                //左侧菜单
                leftMenu:[],
                num: 0,
                width: ["200px", "60px"],
                editableTabsValue: '0',
                editableTabs: [{
                    title: '首页',
                    name: '0',
                    url: '/myList'
                    //content: 'Tab 1 content'
                }],
                tabIndex:'0',
                ruleForm: {
                    pass: '',
                    newPass: '',
                    checkPass: '',
                },
                rules: {
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    newPass: [
                        { validator: checkNewPass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                },
            }
        },
        mounted() {
            window.aaa = this.initUserInfo()
            window.addTabFunction = this.addTab
            window.toTabFunction = this.toTab
        },
        created() {
            this.initUserInfo();
            this.initLeftMenu();
        },
        methods: {
            //初始化用户信息
            initUserInfo(){
                this.$http.get("/system/admin/adminMS").then(result=>{
                    if(result.data.code === 200){
                        this.loginAdmin = result.data.data;
                        window.sessionStorage.setItem('realname',this.loginAdmin.realname);
                    }
                })
            },

            //动态化侧边栏
            initLeftMenu(){
                this.$router.push({ path: "/myList" });
                this.$http.get("/system/permission/list").then(resp=>{
                    this.leftMenu=resp.data.data;
                })
            },

            // 修改密码
            editPassword(newPassword){
                this.loginAdmin.password=newPassword;
                this.$http.post("/system/admin/update",this.loginAdmin).then(resp =>{
                    if(resp.data.code === 200){
                        this.$message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success'
                        });
                        this.dialogFormVisible = false;
                        clearTimeout(this.timer); //清除延迟执行
                        this.timer = setTimeout(()=>{  //设置延迟执行
                            this.quit();
                        },1000);
                    }
                })
            },

            // 退出
            quit(){
                // const token = '';
                // window.localStorage.setItem(token, JSON.stringify(value))
                localStorage.clear();
                this.$router.push("/login")
            },

            // 点击按钮，切换菜单的折叠与展开
            toggleCollapse() {
                this.isCollapse = !this.isCollapse;
                this.num++;
                this.num = this.num % this.width.length;
            },

            //点击标签显示当前连接的内容
            handleClick(tab, event) {
                console.log(this.editableTabs);
                this.editableTabs.forEach((table, index)=>{
                    if (tab.name === table.name){
                        const path = table.url
                        // 跳转页面，使用路由跳转
                        this.$router.push({ path: path })
                    }
                })
                console.log(this.editableTabs)

            },

            //添加标签页
            addTab(url,targetName) { //targetName 页签页名称   url 对应的地址
                let newTabName = ++this.tabIndex + '';
                //获取所有的标签页
                let tabs = this.editableTabs;
                //定义是否已经标签变量
                let isHaveTab = false;
                //循环所有页签页 判断当前点击标签页名称已经存在
                tabs.forEach((tab, index) => {
                    //如果为true 说明当前点击节点（部门管理），已经存在标签页
                    if(targetName === tab.title){// 判断是否相等  1=='1' 值相等  true   1==='1'  false 类型和值都香港等
                        isHaveTab = true;
                        newTabName =tab.name;
                    }
                });
                //如果不存在 添加一个
                if(!isHaveTab) {
                    this.editableTabs.push({
                        title: targetName,
                        name: newTabName,
                        url: url
                        //content: 'New Tab content'
                    });
                    // // 跳转页面，使用路由跳转
                    // const path = this.editableTabs.url;
                    // this.$router.push({ path: path })
                }
                //如果存在，直接让高亮
                this.editableTabsValue = newTabName;
                console.log(this.editableTabs)

            },

            //移除页签页
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
                console.log(this.editableTabs)

                this.editableTabs.forEach((table, index)=>{
                    if (activeName === table.name){
                        const path = table.url
                        // 跳转页面，使用路由跳转
                        this.$router.push({ path: path })
                    }
                })
            },

            //删除成功跳转到指定页面
            toTab(url,targetName,removeUrl) {
                let tabs = this.editableTabs;
                this.editableTabs = tabs.filter(tab => tab.url !== removeUrl);
                this.addTab(url,targetName);
                this.$router.push({ path: url })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },
    }
</script>
<style scoped>

    .operation-wrapper {
        width: 100% !important;
    }
    .el-aside {
        height: calc(100vh);
        overflow-y: auto;
    }
    .el-main {
        padding: 0px 16px !important;
        height: calc(100vh - 61px);
        overflow-y: auto;
    }

    .el-header,
    .el-footer {
        background-color: #fff;
        border-bottom: 2px solid rgba(0, 21, 41, .08);
        color: #333;
        text-align: center;
        line-height: 80px;
    }

    .el-aside {
        background-color: #304156;
        color: #333;
        width: 60px;
        text-align: center;
    }

    .el-main {
        /* background-color: #E9EEF3; */
        color: #333;
        text-align: center;
    }

    body>.el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
        margin-top: 60px;
    }

    .el-aside>.el-menu {
        margin-top: 100px;
    }

    /*.vertical-demo:not(.el-aside--collapse) {*/
    /*	width: 200px;*/
    /*}*/

    .toCollapse {
        width: 40px;
        height: 40px;
        margin: 10px;
        padding: 0px;
        font-size: 32px;
        float: left;
        border-radius: 5px;
    }

    .aaa{
        line-height: 80px;
    }
</style>
